<template>
    <div class="filter-menu">

            <div class="wrap">
                <div class="label" v-if="abrand !== ''">
                    <div>{{abrand}}</div>
                    <Icon type="ios-close" size="20" @click="selectBrand('')"></Icon>
                </div>
            
                <div class="label" v-if="arom !== ''">
                    <div>{{arom}}</div>
                    <Icon type="ios-close" size="20" @click="selectRom('')"></Icon>
                </div>
            
                <div class="label" v-if="aos !== ''">
                    <div>{{aos}}</div>
                    <Icon type="ios-close" size="20" @click="selectOs('')"></Icon>
                </div>
            </div>


        <div class="row" v-if="abrand == ''">
            <div class="left">品牌</div>
            <div class="right" v-for="(item, index) in brand" :key="index" :item="item" @click="selectBrand(item)">
                {{item}}
            </div>

        </div>
        <div class="row" v-if="arom == ''">
            <div class="left">机身内存</div>
            <div class="right" v-for="(item, index) in rom" :key="index" :item="item" @click="selectRom(item)">
                {{item}}
            </div>
        </div>
        <div class="row" v-if="aos == ''">
            <div class="left">操作系统</div>
            <div class="right" v-for="(item, index) in os" :key="index" :item="item" @click="selectOs(item)">
                {{item}}
            </div>
        </div>
    </div>
</template>

<script>
import service from "@/service/index";
export default {
  name: "filterMenu",
  data() {
    return {
      name: "",
      brand: [],
      rom: [],
      os: [],
      abrand: "",
      arom: "",
      aos: ""
    };
  },
  created() {
    service.get("/v1/home/filterMenu").then(data => {
      console.log(data);
      //this.banner = data
      this.brand = data.brand;
      this.rom = data.rom;
      this.os = data.os;
    });
  },
  methods: {
    selectBrand(brand) {
      console.log(brand);
      this.abrand = brand;
    },
    selectRom(rom) {
      console.log(rom);
      this.arom = rom;
    },
    selectOs(os) {
      console.log(os);
      this.aos = os;
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-menu {
  margin-top: 60px;
  margin-bottom: 60px;
}
.row {
  display: flex;
  border-bottom: 1px solid #ddd;
  .left {
    width: 200px;
    height: 30px;
    line-height: 30px;
    background: #f3f3f3;
    border-bottom: 1px solid #ddd;
  }
  .right {
    line-height: 30px;
    margin-left: 7px;
    color: cornflowerblue;
  }
}
.wrap {
  display: flex;
  margin-bottom: 20px;
  margin-left: 20px;
  .label {
    display: flex;
    background: #2d8cf8;
    padding: 2px 7px;
    border-radius: 5px;
    color: #fff;
    margin-right: 2px;
  }
}

</style>
